var index = 0;   //li初始索引
var li = $(".banner ul li");
var img = $(".music .m_img img");
var text = $(".music .m_text");
var prev = $(".music .m_btn .m_prev");
var play = $(".music .m_btn .m_play");
var next = $(".music .m_btn .m_next");
var mp3 = $(".music .m_mp3");
var flag = false;  //歌曲是否播放
var close = true;  //播放器是否显示

//点击图片
li.click(function(){
	console.log($(this).index());
	index=$(this).index();
	show();
});

//播放结束下一首
if(mp3){
	mp3.loop = false;
	mp3[0].addEventListener('ended', function () { 
		index++;
		if(index>li.length-1){index=0;}
		show();
	}, false);
}

//播放歌曲
function show(){
	change_bg(index+1);
	change_img_text(index+1);
	change_btn_title();
	img_rotate();
	play_mp3();
};

//更换背景
function change_bg(idx){
	$("body").css({
		"background":"url(img/"+ idx+"_bg.jpg) no-repeat",
		"background-size":"cover"
	});
};

//更换播放图片、文本
function change_img_text(idx){
	img.attr("src","img/"+idx+".jpg");
	text.html(li.eq(index).attr("title"));
};

//更换播放按钮和title为暂停
function change_btn_title(){
	play.removeClass("m_play");
	play.addClass("m_pause");
	play.attr("title","暂停");
};

//图片旋转
function img_rotate(){
	//先移除所有
	li.children().removeClass("img_rotate");
	li.eq(index).children().addClass("img_rotate");
};

//播放歌曲
function play_mp3(){
	//获取选中的li的datasrc属性
	mp3.attr("src",li.eq(index).attr("datasrc"));
	mp3.get(0).play();
	flag=true;
};

//点击暂停或者播放歌曲
play.click(function(){
	if(flag){      //点击前歌曲正在播放
		mp3.get(0).pause();
		li.eq(index).children().removeClass("img_rotate");
		play.removeClass("m_pause").addClass("m_play").attr("title","播放");
		flag=false;
	}else{
		mp3.get(0).play();
		li.eq(index).children().addClass("img_rotate");
		play.removeClass("m_play").addClass("m_pause").attr("title","暂停");
		flag=true;
		change_bg(index+1);
	}
});

//上一首下一首
prev.click(function(){
	index--;
	if(index<0){index=li.length-1;}
	show();
});
next.click(function(){
	index++;
	if(index>li.length-1){index=0;}
	show();
});

//播放器隐藏显示
$(".m_close").click(function(){
	if(close){  //点击前是打开的
		$(this).addClass("m_open");
		$(".music").animate({"left":"-520px"},800);
		close=false;
	}else{
		$(this).removeClass("m_open");
		$(".music").animate({"left":"0px"},800);
		close=true;
	}
});
